<script setup lang="js">
import { ref, reactive, onMounted } from "vue";

const props = defineProps({
  formInline: {
    type: {
      type: String,
      default: "file"
    },
    id: {
      type: String,
      default: ""
    },
    tagName: {
      type: String,
      default: ""
    },
    parentId: {
      type: String,
      default: "0"
    },
    width: {
      type: String,
      default: ""
    },
    height: {
      type: String,
      default: ""
    },
    canvasPicUrl: {
      type: String,
      default: ""
    },
    bgImgFileName: {
      type: String,
      default: ""
    },
    bgImgPrint: {
      type: String,
      default: "no"
    },
    backgroundImageBase4: {
      type: String,
      default: ""
    }
  }
});
const newFormInline = ref(props.formInline);
onMounted(() => {
  console.log(newFormInline.value);
});
</script>

<template>
  <div class="content">
    <div class="top">
      <img :src="newFormInline.backgroundImageBase4" style="max-height: 100%" />
    </div>
    <div class="flex items-center justify-center h-9">
      纸张尺寸 :100mm* 100mm
    </div>
  </div>
</template>

<style lang="scss" scoped>
.top {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 500px;
  padding: 20px 0;
  overflow: hidden;
  background-color: #f4f4f4;
}
</style>
